<template>
    <div class="echartContainer" >
        <div :id="id" :class="className"  :style="{height: height,width:width}" v-if="update"></div>
    </div>
</template>
<script>
   import echarts from "echarts"
   let  chinaGeoJson  = require("../../assets/map/china.json") 
    export default {
        props: ['id', 'className', 'height', 'width' , 'options' , 'title'],// 父组件传递 或者vuex获取
        data() {
            return {
                baseSet: {
                    title: { 
                        text: '', 
                    textStyle:{
                        color:'#666666',
                        fontWeight:'normal',
                        fontSize:14
                        }
                    },
                    legend:{
                        show:true,
                        left: 100
                    },
                    color: ['#ff7068']
                },
                update:true
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init(id) {
              
                let that = this;
                that.$nextTick(()=>{
                    let elementDiv = document.getElementById(that.id);
                    let  myChart = echarts.init(elementDiv),
                        options = this.options;

                    // 绘制图表
                    if(options && typeof options == "object"){
                        
                        //基础样式设置
                        if(that.title && that.title != '' ){
                            let baseSet =  that.baseSet;
                            baseSet.title.text = that.title;
                            baseSet.legend.left = (that.title.length*14) + 20;
                            if(options.legend){
                                options.legend = { ...baseSet.legend , ...options.legend }
                            }
                            options = { ...baseSet , ...options}
                        }

                        //地图
                        if(options.series[0].type == 'map'){
                            echarts.registerMap('china', chinaGeoJson);
                        }

                        if(options.xAxis && options.dealxTitle){  //处理x轴标题
                            that.dealxData(options).then(res=>{
                                myChart.setOption(res);
                            })
                        }else{
                            myChart.setOption(options);
                        }
                    }
                })
            },
            dealxData(data){
                data = JSON.parse(JSON.stringify(data));
                let xTitle = [];
                return new Promise((res,rej)=>{
                    if(Object.prototype.toString.call(data.xAxis) == "[object Object]"){
                        xTitle = JSON.parse(JSON.stringify(data.xAxis.data));
                       this.dealxTitle(xTitle).then(xTitleRes=>{
                            data.xAxis.data = xTitleRes;
                            res(data)
                        })
                    }else{
                        xTitle = JSON.parse(JSON.stringify(data.xAxis[0].data))
                        this.dealxTitle(xTitle).then(xTitleRes=>{
                            data.xAxis[0].data = xTitleRes;
                            res(data)
                        })
                    }
                })
            },
            dealxTitle(data){
                let xTitle = JSON.parse(JSON.stringify(data));
                return new Promise((res,rej)=>{
                    if( Object.prototype.toString.call(xTitle) == "[object Array]" && xTitle.length>0){
                        xTitle =  xTitle.map(item=>{
                            if(typeof(item) == "object"){
                                return item.value.replace(/(.{5})/g, "$1\n")
                            }else{
                                return item.replace(/(.{5})/g, "$1\n")
                            }
                        })
                    }
                    res(xTitle)
                })
            },
            uploadData(){
                //更新数据
                let that = this;
                this.update = false;
                this.$nextTick(()=>{
                    // 基于准备好的dom，初始化echarts实例
                    console.log("节点更新了")
                    that.update = true;
                    that.init();
                });
            }
        }
    }
</script>
<style lang="less" scoped>
    .echartContainer{
        width: 100%;
        overflow: auto;
    }
</style>